Scrapbox 3年間 1400回のリリースを振り返る

こんばんは、shokaiです

Scrapboxのプロダクトマネージャーです

めちゃくちゃ開発をしています

元気にしていましたか

私は社外の人と会うのが久しぶりすぎて、名刺の社名がNota inc.のままでした

右のメニューのStart presentationでスライドになる

ページ内にコメントどうぞ

3年1ヶ月ぶり

超ひさしぶりです

今日は楽しんでいってください

この3年のScrapboxの歩み

ユーザー数

10万→29万

ページ数

400万→1300万

チーム利用も含まれているからなんとも言えないけど、一人当たりだとだいぶ少なく感じる

売り上げ

けっこう増えた

サーバーコスト

なぜかあまり増えていない

負荷が上がる→サーバー増える→ソフトウェアの改善→サーバー減る

更新のリリース回数

1400回

開発メンバー

社名が変わった

社員も20→100人近くに増えた

HelpfeelとScrapboxの関係

Scrapboxにヘルプテキストを書いて変換するといい感じのヘルプページになる、それがHelpfeel

? これのこと

Scrapboxとは

WiKiでありメモ帳でありchatです

言語化できていなかった部分が明らかになってきたりする

新しくページ作って、リンクして、関連ページを辿る

最近作ったおもしろい機能

https://gyazo.com/7c88d0f0c56474863a4ffd1b5945b4ee

実装

検索、読む、辿る、を繰り返す

検索範囲のコントロール

1 projectを数百人、10万ページで使っている時に効くはず

デカいprojectの一部、このへん、だけを検索する機能だ

どの範囲が検索対象なのか知りたい

ゆっくり操作してください

https://gyazo.com/2d8cf0be9756c123d9d3cc0bf45af017

ページの過去のバージョンが見れる

のだが、イマイチ認知されてないので、Historyの存在を可視化して導線を作りたかった

最初はページの紙が重なってるようなビジュアルとか検討してたけど

https://scrapbox.io/files/63d8b71f88a9c3001dfb1830.png

履歴→重なり→堆積→テロメアの凸凹って地層っぽくね？→そもそもテロメアが、ページ内の部位毎に更新日時が違う事を示してるのだからそこからPage historyまで一気に移動できればいいじゃん

となった

historyも全文検索の対象に含めたい

古い情報を本文から思い切って削除しやすくなる

社内規則のページには最新の情報だけ表示したい

しかし、2018年の社内規則を急に読みたい、という事も稀にある

自分のページ作る導線を強化している

今なんと、Scrapboxが数百人規模の部署や会社に導入される事が増えています

逐一説明する必要がある

To discuss with N members

https://gyazo.com/46e0a6fd775234cc13d48ca77db5e99b

他にメンバーがいるprojectを表示した時に発動

メニューが勝手に開いて、点滅する

イマジナリービーバー君

https://scrapbox.io/files/63d8b722962bbd001e198f4a.png

自分のページテンプレートで、あなたの想像上のビーバー君が喋る

project memberにはいない。システムの擬人化

自分のページをどう使うのか、ページの一番上の画像がアイコンになる、などの仕様がわかる

ほか、1400回の機能リリースを10分で紹介

いま19:54:23

ここ3年で大変だったやつ

スマホとタブレット用の実装を書き直した

Safariの3rd party cookie廃止により、Gyazoとの連携機能を作り直した

アラビア語入力の対応

ファイルアップロード容量追加の課金機能

10万ページを数百人で編集する会社が現れた

ページを探す機能

全文検索にヒットした位置まで自動スクロール

https://gyazo.com/e076081140dff78f082c652566266a8c

関連ページを開く時に、参照元まで自動スクロール

https://nota.gyazo.com/ef81993dbbd899d6381aabb5f3bda3ca

https://gyazo.com/a652d746a1935ecd2e30a156580c7cb7

関連ページリストに他のprojectのページも表示

自分が見たことがあるprojectだけ表示される

https://gyazo.com/abf75d03590f28018fd00ef04c697140

全文検索して下にスクロールすると、検索範囲が広がる

ページタイトルだけ検索

https://gyazo.com/3bf0f7ff6370cd6fd3b24dc88cef3e5b

本文を検索対象から除外できる

https://gyazo.com/fd7eb811dcc83e8f4271a58e00994571

似たようなタイトルのページを折りたたむ

定例ミーティングの議事録で便利

QuickSearchのソート

連番っぽいタイトルのページのソートがいい感じになった

ページの更新に気づく機能

https://gyazo.com/794c8d29b3e8bfb82b64ae9e46f56ca3

未読行の位置をスクロールバーに重ねて表示する

UserScriptでクリックできるようにもできる

https://scrapbox.io/files/63d8b72d4a15ed001ed5a6a4.png

これまで

既読・未読を2色で表していた

緑（青）のマークに濃淡をつけ、区別できるようにした

ページを読み込む前に更新されていた未読行

ページを読み込んだ後に更新された更新行

いろんな人が同期的にも非同期的にも編集するので

https://scrapbox.io/files/63d8b731fb563b001dae61da.png

ページリスト画面を自分のアイコンが書かれているページだけに絞り込む

このモードでは未読マークが表示される

https://gyazo.com/1e0f7235203bfbee811fac9876ea7e28

https://scrapbox.io/files/63d8b7348e0b78001f7c6089.png

ページリスト画面を自分が更新したページだけに絞り込む

未読マークも表示される

Microsoft Teams通知

https://gyazo.com/285092eb71f762c49ff5e08828d235da

ついでにDiscord通知も実装した

https://scrapbox.io/files/63d8b738868541001ecc240e.png

ファイルアップロード

ファイル容量を追加購入できる

https://nota.gyazo.com/1447672db46b773e7707b3abd61039bf

ファイル検索

https://gyazo.com/a35b363bfbf56f44c9b56d4b948649c5

画像、PDF、テキストファイルの中身が検索できる

画像のテキストをゲット

https://gyazo.com/172adaac012f18d922d0bc2e4463881c

ページリスト画面にいきなりファイルをアップロード

https://gyazo.com/b15e1af911ceb6c4be4d66bcc85d58f3

ページリストにdrag and dropしたらページが新規作成される

タッチで出るpopupの「Upload」からアップロード

https://gyazo.com/0bd310bffdbc36b0b52c48dc5c3b412a

タッチで出るpopupの「Paste」からアップロード

https://scrapbox.io/files/63d8b73f20651f001e48b330.MOV

iOSのKeynoteなどから、画像としてアップロードできる

スマホ・タブレット対応

エディタの中を全部実装し直した

当たり判定やUI部品やイベントの処理方法など

タッチとクリックでUIを出し分ける

https://scrapbox.io/files/63d8b744672e73001e12722e.mp4

https://scrapbox.io/files/63d8b7483ffc36001dddca4d.MOV

画面の上側に出る

iPad + magic keyboard対応

画面を指でタッチもするし、トラックパッドでクリックもする

そのせいでテキスト選択だけで7種類も方法がある

https://scrapbox.io/files/63d8b74d7f4f62001eaa5c3d.MOV

指でタッチでツマミを広げる

指でタッチして表示されるカーソルpopup menuのSelectボタンから開始

マウスポインタをドラッグ

shiftキー + マウスクリック

shiftキー + 上下左右キー

shiftキー + タッチ

ダブルクリックて単語選択

トリプルクリックで行選択

当たり判定の色々な関係で難しい

business project向け機能

ログイン方法が増えた

https://gyazo.com/7543a0f3eedc37a626f15c5162f312ab

https://scrapbox.io/files/63d8b75252701f001e369bbd.png

https://gyazo.com/d3e04aebf871f444e1dac4ba546098d1

監査ログ

https://scrapbox.io/files/63d8b7774c8b00001e3febab.png

誰がどのページで何をしたか記録されている

知人をprojectに参加させる

https://gyazo.com/482f4fd49126ac91c20595116512a131

メールアドレスや名前で検索して、招待URLを使わずにいきなり追加

projectを作って人を追加する時に便利

「このクレジットカードを使う」ボタン

https://gyazo.com/345b81ac08a3ff93aab0f9cb2f406050

新しいbusiness projectを作って、既存の支払いに紐付けできる

ページ編集まわりの改善

Update links & merge pages

https://gyazo.com/67b41b7f1e1ad8b6e497852e0036fedb.mp4

タイトルが重複したページをmergeしつつ

ページの上の方を誰かが編集しても、下の人のスクロール位置がガタガタしない

https://gyazo.com/78f7bed8edc4d0b10a067c3836ec1bb9

上が激しくても下の人が困らなくなる

同じ行をみんなで編集しても、いい感じにカーソルの位置を調整する機能

のだが

それを防ぐように、カーソル位置が自動調整されるようになった

同じ行の編集操作を実装するの大変そう

テロメアから行permalinkを取得

https://gyazo.com/96f7a02a4d5474e4a743913aa5b07c58

行をひらくURLを取得できる

プレゼンモードそのまま編集

https://gyazo.com/3b7d7cc994fb8e2b47a283d93899ebce

https://gyazo.com/b66fd2ad41812dc231e687ec3dbb26d8

RTL（アラビア語やヘブライ語）とLTR（日本語や英語）を混在させて、そこそこ普通に書ける

お絵かき

ペンの太さが選べるようになった

https://gyazo.com/ba4fcee3269e50fb020ddb021ffd23f6

status barの警告色を赤から黄色にした

https://gyazo.com/f74102acd54fde38c9633915ada277af

色弱・色盲対応のつもりだったが

接続エラーの色が赤だと認識できない人が多いらしい

https://gyazo.com/ca7ad61ccce0c8158068656cb88dc542

https://gyazo.com/8630ec2abb6c19f7ae73b3a958fe28d3

昔(?)、青色発光 LED に関わる研究に携わってて、青色のスペクトルが出ているのに人間の目にはそれより弱い強度の緑色やアンバーしか見えないみたいな経験があった(不純物が入っていると、青色以外が光る)

黄色と赤色の話は、波長が長い方の話で、赤色より黄色の方が感度が高い

チャンギージーの本はたぶんこれ。早川書房でキンドルになってた。知らんかった

この感度が良すぎて、スペクトル的には全く区別がつかない(つまり宇宙人からみたらみんな同じ*サル*に見える)人間に、肌の色の違いがあって、人種というものが存在するのだ、という不幸が生まれた、ということらしいです

https://gyazo.com/95822ea2763d5157f2a4b3f74047b382

まとめ

色々やった

ページを探す

ページを編集する

リンクを辿る

様々なデバイスで

たくさんの人数で

大量のページを

仕事でも使えるように

実際は年に数回やりたいねという感じです

88888888888

https://gyazo.com/9ec387b5df641e805e42557af0e57bf7

jgs.icon